<template>
<div class="app-container">
  <div style="width: 600px">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="用户昵称" prop="nickname">
        <el-input size="small" v-model="form.nickname" />
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input size="small" v-model="form.realName" />
      </el-form-item>
      <el-form-item label="姓名拼音" prop="pinyinName">
        <el-input size="small" v-model="form.pinyinName" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input size="small" v-model="form.mobile" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker
          size="small"
          value-format="yyyy-MM-dd"
          v-model="form.birthday"
          type="date"
          placeholder="选择生日日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="公司" prop="company">
        <el-input size="small" v-model="form.company" />
      </el-form-item>
      <el-form-item label="职称" prop="jobTitle">
        <el-input size="small" v-model="form.jobTitle" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input size="small" v-model="form.email" />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSubmit('form')">保存</el-button>
        <el-button size="small" @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
import {getUserDetailApi,saveUserApi} from '@/api/user'
export default {
  data() {
    return {
      form: {
        id: '',
        nickname: '',
        realName: '',
        mobile: '',
        company: '',
        jobTitle: '',
        email: '',
        gender: '1',
        birthday: '',
        pinyinName: '',
      },
      detailId: '',
    }
  },
  mounted() {
    this.detailId = this.$route.query.editId
    this.getDetail()
  },
  methods: {
    getDetail() {
      getUserDetailApi(this.detailId).then((res) => {
        this.form.id = res.data.id,
        this.form.nickname = res.data.nickname
        this.form.realName = res.data.realName
        this.form.mobile = res.data.mobile
        this.form.company = res.data.company
        this.form.jobTitle = res.data.jobTitle
        this.form.email = res.data.email
        this.form.gender = String(res.data.gender)
        this.form.birthday = res.data.birthday
        this.form.pinyinName = res.data.pinyinName
      })
    },
    onSubmit(formName) {
      // this.$message('submit!')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveUserApi({
            id: this.form.id,
            nickname: this.form.nickname,
            realName: this.form.realName,
            mobile: this.form.mobile,
            company: this.form.company,
            jobTitle: this.form.jobTitle,
            email: this.form.email,
            gender: this.form.gender,
            birthday: this.form.birthday,
            pinyinName: this.form.pinyinName,
          }).then((res) => {
            this.$message.success('操作成功！');
            setTimeout(() => {
              this.$router.back(-1)
            }, 1000);
          })
        } else {
          return false;
        }
      });
    },
    onCancel() {
      setTimeout(() => {
        this.$router.back(-1)
      }, 1000);
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>
